import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Layout, Radio, Select, Button} from 'antd';
import {requestUrl} from '../value';
import {config} from "../config";
import reqwest from "reqwest";

import tt from '../image/tt.jpg'
import '../css/login.css';
import md5 from 'MD5';

const Option = Select.Option;
const FormItem = Form.Item;
const {Content, Header} = Layout;
const RadioGroup = Radio.Group;

// 登陆界面
class SiteLogin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
        };
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Layout style={{background: '#fff', height: '100%', textAlign: 'center'}}>
                {/*<Header style={{background: '#fff'}}/>*/}
                <div className="header">
                    <div className="area">
                        <a href="" target="_blank"><img className="logo" src={tt}/></a>
                        <div className="greeting">欢迎登录</div>
                        {/*<div className="menu">*/}
                        {/*客服热线：4008933288&nbsp;&nbsp;*/}
                        {/*<a href="tencent://message/?uin=">QQ群：487317250</a>&nbsp;&nbsp;*/}
                        {/*</div>*/}
                    </div>
                </div>
                <div className="contents">
                    <div className="bg"></div>
                    <div className="area">
                        <div className="phones_img">
                            <img src={tt}/>
                            {/*<div className="contents_text">*/}
                            {/*<span className="span_title">风口新零售，移动数据化</span>*/}
                            {/*<span className="span_content">88批发网约你共创未来</span>*/}
                            {/*<span className="inner_content">高效即时下单，传统与互联网的个性结合</span>*/}
                            {/*<span className="inner_content">海量商品数据批量导入，库存数据随时掌握</span>*/}
                            {/*<span className="inner_content">多种价格选择模式，保护价格隐私</span>*/}

                            {/*<span className="inner_content">云端存储，食品行业免P图，输入条码就有图</span>*/}
                            {/*<span className="inner_content">微信小程序助力，共享9亿流量</span>*/}
                            {/*</div>*/}
                        </div>
                        <div className="loginbox">
                            <h1>检测站管理系统</h1>
                            <Form>
                                <div className="item userName">
                                    <label></label>
                                    <FormItem>
                                        {getFieldDecorator('site_contact')(
                                            <Input onKeyDown={(e) => {
                                                this.handleKeyDown(e)
                                            }} id="txt_userName" className="empty" type="text" placeholder="输入管理员账号"/>
                                        )}
                                    </FormItem>
                                </div>
                                <div className="item passWord">
                                    <label></label>
                                    <FormItem>
                                        {getFieldDecorator('site_password')(
                                            <Input onKeyDown={(e) => {
                                                this.handleKeyDown(e)
                                            }} id="txt_password" type="password" className="empty" placeholder="请输入密码"/>
                                        )}
                                    </FormItem>
                                </div>

                                <Button
                                    loading={this.state.loading}
                                    onClick={(e) => this.handleSubmit(e)} id="longinSubmit" className="submit">
                                    登录
                                </Button>
                                <div className="forget"><a onClick={(e) => this.handleForgetPass(e)}
                                                           href="/ForgetPassword" target="_self">忘记密码？</a></div>
                            </Form>
                        </div>
                    </div>
                </div>

                <div className="bottom">
                    <div className="area info">
                        <span>© Copyright.  领蓝科技有限公司 - All Rights Reserved.
                                <a style={{marginLeft: '30px'}} href="http://www.miitbeian.gov.cn">粤ICP备17134571号</a>
                                </span>
                    </div>
                </div>
            </Layout>
        )
    }

    componentDidMount() {
        app.setToken('123');
    }

    handleKeyDown(e) {
        if (e.keyCode == '13') {
            this.handleSubmit(e)
        }
    }

    //登录账号
    handleSubmit = (e) => {
        e.preventDefault();
        let that = this;
        that.props.form.validateFields((err, values) => {
            if (!err) {
                values.site_password = md5(values.site_password);
                this.setState({loading: true});
                // that.props.history.push(config.fPath + '/sitehomes/siteorder');
                // return;

                reqwest({
                    url: app.serverUrl + requestUrl.SITE_LOGIN,
                    method: 'post',
                    data: {
                        ...values,
                    },
                    type: 'json',
                }).then((data) => {
                    if(data.code == 1){
                        that.setState({
                            loading: false,
                            data: data.data.dataSet || [],
                        });
                        app.setData('site_name',data.data.site_name);
                        app.setData('site_id',data.data.site_id);
                        that.props.history.push(config.fPath + '/sitehomes/siteorder');
                        window.location.reload();
                    }else if(data.code == -1){
                        app.alert('请重新登录', 'error', 2);
                       // window._this.props.history.push(path + '/login')
                    }
                    else{
                        app.alert(data.msg, 'error', 2);
                        that.setState({
                            loading: false,
                            data:[]
                        });
                    }
                });
            }
        });
    };

    handleForgetPass(e) {
        e.preventDefault();
        this.props.history.push(config.path + "/forgetPassword");
    }
}

const SiteLogins = Form.create()(SiteLogin);
export default SiteLogins;